<template>
	<wyb-popup
		ref="popup"
		type="right"
		height="400"
		width="578"
		radius="6"
		:scroll-y="popupScroll"
		:showCloseIcon="true"
		@show="onPopupShow"
	>
		<view class="flex f-column s-gzbh">
			<text
				class="font28 gray333 bold"
				style="padding-left: 15rpx; margin-bottom: 50rpx"
				>筛选</text
			>
			<view class="flex wrap main-content">
				<view
					v-if="isSchoolQu"
					@click="selectGzbh = ''"
					class="f-center f-column gz-box"
					:class="{ 'gz-active': !selectGzbh }"
				>
					<text>全部</text>
					<image
						src="/static/img/dui.png"
						class="img-dui"
						v-if="!selectGzbh"
					></image>
				</view>
				<view
					@click="handleSelect(item)"
					class="f-center f-column gz-box"
					:class="{ 'gz-active': selectGzbh == item.gzbh }"
					v-for="(item, index) in cabinetList"
					:key="index"
				>
					<text>{{ item.gzbh }}</text>
					<text class="mt30">{{ item.address }}</text>
					<image
						src="/static/img/dui.png"
						class="img-dui"
						v-if="selectGzbh == item.gzbh"
					></image>
				</view>
			</view>
			<view class="s-btn f-center" @click="confirmHandle"> 确 认 </view>
		</view>
	</wyb-popup>
</template>

<script>
import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
import { mapMutations, mapState } from 'vuex'
export default {
	props: {
		isSchoolQu: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			cabinetList: [],
			selectGzbh: '',
			selectAddress: '',
			pageTitle: uni.getStorageSync('pageTitle'),
			popupScroll: true
		}
	},
	props: {
		clothName: String
	},
	components: {
		wybPopup
	},
	mounted() {
		this.getCabinetList()
	},
	onShow() {
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				const { latitude = '', longitude = '' } = Object.assign({}, res)
				getApp().globalData.latitude = latitude
				getApp().globalData.longitude = longitude
			},
			fail: (err) => {
				this.$api.msg('位置获取失败')
			}
		})
	},
	methods: {
		onPopupShow() {
			this.popupScroll = true
		},
		handleSelect(data) {
			this.selectGzbh = data.gzbh
			this.selectAddress = data.address
		},
		confirmHandle() {
			this.$emit('gzbhChange', {
				gzbh: this.selectGzbh,
				address: this.selectAddress
			})
			this.close()
		},
		getCabinetList() {
			this.$http
				.ajax({
					url: '/Cabinet/list',
					params: {
						lat: getApp().globalData.latitude,
						lng: getApp().globalData.longitude,
						page: 1,
						limit: 999,
						operatorid: uni.getStorageSync('merchantId')
					}
				})
				.then((res) => {
					if (res.code == 0) {
						if (this.pageTitle == '校园入口') {
							let arr = uni.getStorageSync('selfGzbh').split(',')
							this.cabinetList = res.data.filter((item) => {
								return arr.includes(item.gzbh)
							})
						} else {
							this.cabinetList = res.data
						}
					}
				})
		},
		open() {
			this.$refs.popup.show()
		},
		close() {
			this.$refs.popup.hide()
		}
	}
}
</script>

<style lang="scss" scoped>
.s-gzbh {
	padding-top: 40rpx;
	width: 578rpx;
	height: 100%;
	overflow: hidden;
	position: relative;
	padding: 20rpx 23rpx 150rpx;
}
.main-content {
	height: calc(100% - 38rpx - 87rpx);
	overflow-y: auto;
}

.gz-box {
	width: 236rpx;
	background: #ffffff;
	border: 2rpx solid #e8e8e8;
	border-radius: 7rpx;
	font-size: 25rpx;
	color: #282828;
	margin: 0 15rpx 30rpx;
	padding: 30rpx 20rpx;
	position: relative;
}

.gz-active {
	border-color: #4082fd;
	color: #4082fd;
}

.img-dui {
	width: 46rpx;
	height: 47rpx;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 10;
}

.s-btn {
	width: 500rpx;
	height: 87rpx;
	background: #4082fd;
	border-radius: 13rpx;
	font-size: 31rpx;
	color: #ffffff;
	position: absolute;
	bottom: 50rpx;
	left: 39rpx;
	z-index: 99;
}
</style>
